<template>
  <div>
    <div class="search_form">
			<div>
        <el-input size="mini" clearable v-model="searchform.truckNo" placeholder="请输入车牌号" class="others">
        </el-input>
        <el-input size="mini" clearable v-model="searchform.driver" placeholder="请输入司机姓名" class="others">
        </el-input>
        <el-date-picker
					size="mini"
					v-model="searchform.preArriveTime"
					type="date"
					format="yyyy年MM月dd日"
					value-format="yyyy-MM-dd"
					placeholder="预计到港时间"
					class="others"
          clearable
				></el-date-picker>
        <el-select size="mini" clearable placeholder="请选择状态" v-model="searchform.status">
          <el-option v-for="(item, index) in statusList" :key="index"
            :label="item.label" :value="item.value"></el-option>
        </el-select>
				<el-button @click="searchData" class="search_btn" type="primary" icon="el-icon-search" size="mini">
					查询
				</el-button>
			</div>
      <div>
        <el-button type="primary" icon="el-icon-s-check" v-hasPermi="['yardManagement:TYardCollectionTicket:insert']" size="mini" @click="auditVehicle">审核</el-button>
      </div>
		</div>
    <BaseTable 
      :data="tableData" 
      :columns="columns" 
      @details="handlerClickDetails" 
      :tableHeight="tableHeight" 
      :pagination="queryall"
			@size-change="sizeChange"
			@current-change="pageChange" 
      :loading="loading"></BaseTable>
    <!-- 审核 -->
    <el-drawer title="预约信息" :visible.sync="isShow" destroy-on-close size="60%" :before-close="handleClose">
      <el-form :model="formitem" label-position="top" style="padding:10px 20px;">
        <el-row>
          <el-col :span="8">
            <el-form-item label="派车单号">
              <el-input size="mini" v-model="formitem.dispatchNo"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="车牌号">
              <el-input size="mini" v-model="formitem.truckNo"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="司机">
              <el-input size="mini" v-model="formitem.driver"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="重量">
              <el-input size="mini" v-model="formitem.ton"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="货种">
              <el-select 
                style="width: 100%"
                v-model="formitem.cargoCategoryCode"
                v-selecttext="formitem.cargoCategoryName,cargoCategoryList,'cargoCategoryCode'"
                size="mini"
                clearable>
                <el-option
                  v-for="(item,index) in cargoCategoryList"
                  :key="index"
                  :value="item.cargoCategoryCode"
                  :label="item.cargoCategoryName"
                  >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="库场">
              <el-select 
                style="width: 100%"
                v-model="formitem.storehouseId"
                v-selecttext="formitem.storehouseName,storehouseList,'id'"
                size="mini"
                clearable>
                <el-option
                  v-for="(item,index) in storehouseList"
                  :key="index"
                  :value="item.id"
                  :label="item.storehouseName"
                  >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="选择计划">
              <el-input size="mini" v-model="formitem.planNo" readonly @click.native="selectPlan"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <Upload @changeFile="changeFile" :fileListEdit="fileList"/>
          </el-col>
        </el-row>
      </el-form>
      <!-- <el-collapse v-model="activeNames">
        <el-collapse-item title="货物信息" name="1"> -->
          <!-- <template slot="title"> -->
            <div style="width:100%;background: #f5f7fa;height:40px;line-height:40px">
              <span style="margin-left:10px">货物信息</span>
              <el-button type="text" style="float: right;height:40px" size="mini" @click="addVehicle">新增</el-button>
            </div>
          <!-- </template> -->
          <el-form :model="vehicleForm" ref="vehicleForm" :rules="rules" class="vehicleForm">
            <el-table
					  	v-tableMove
              border
              height="300px"
					  	:data="vehicleForm.detailTableData"
					  	stripe
					  	highlight-current-row
					  	style="width: 100%;"
					  >
					    <el-table-column prop="pieceNo" label="件号">
                <template slot-scope="scope">
                  <el-input
									  v-model="scope.row.pieceNo"
									  size="mini"
									  @input="scope.row.pieceNo = verifyfilter('number', scope.row.pieceNo)"
								    />
                </template>
              </el-table-column>
              <el-table-column prop="cargoName" label="货名">
                <template slot-scope="scope">
                  <el-select v-model="scope.row.cargoCode" clearable size="mini" @change="changeCargo(scope.$index,scope.row)">
                    <el-option
                      v-for="(item,index) in cargoList"
                      :key="index"
                      :value="item.cargoCode"
                      :label="item.cargoName" />
                  </el-select>
                </template>
              </el-table-column>
						  <el-table-column prop="specs" label="规格">
                <template slot-scope="scope">
                  <el-input
									  v-model="scope.row.specs"
									  size="mini"
								    />
                </template>
              </el-table-column>
						  <el-table-column prop="material" label="材质">
                <template slot-scope="scope">
                  <el-input
									  v-model="scope.row.material"
									  size="mini"
								    />
                </template>
              </el-table-column>
						  <el-table-column prop="mark" label="标记" width="100">
                <template slot-scope="scope">
                  <el-input
									  v-model="scope.row.mark"
									  size="mini"
									  @input="scope.row.mark = verifyfilter('number', scope.row.mark)"
								    />
                </template>
              </el-table-column>
						  <el-table-column label="件数">
                <template slot-scope="scope">
                  <el-form-item 
                    :prop="'detailTableData.'+scope.$index+'.quantity'"
                    :rules="rules.quantity">
                    <el-input
									    v-model="scope.row.quantity"
									    size="mini"
									    @input="scope.row.quantity = verifyfilter('number', scope.row.  quantity)"
								      />
                  </el-form-item>
                </template>
              </el-table-column>
						  <el-table-column label="重量">
							  <template slot-scope="scope">
                  <el-form-item
                    :prop="'detailTableData.'+scope.$index+'.ton'"
                    :rules="rules.ton">
								    <el-input
									    v-model="scope.row.ton"
									    size="mini"
									    @input="scope.row.ton = verifyfilter('digit', scope.row.ton)"
								      />
                  </el-form-item>
							  </template>
						  </el-table-column>
						  <el-table-column label="体积">
							  <template slot-scope="scope">
                  <el-form-item
                    :prop="'detailTableData.'+scope.$index+'.volume'"
                    :rules="rules.volume">
								    <el-input
									    v-model="scope.row.volume"
									    size="mini"
									    @input="scope.row.volume = verifyfilter('digit', scope.row.volume)"
									    />
                  </el-form-item>
							  </template>
						  </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-link
                    type="danger"
                    @click="handlerClickDetail(scope.$index)">
                    删除</el-link>
							  </template>
              </el-table-column>
					  </el-table>
          </el-form>
        <!-- </el-collapse-item>
      </el-collapse> -->
      <div class="demo-drawer__footer">
          <el-button
            size="small"
            type="primary"
            @click="saveInventory()"
          >保存</el-button>
        </div>
    </el-drawer>
    <el-drawer title="选择作业计划" custom-class="importBus" :visible.sync="isShowPlan" append-to-body destroy-on-close size="70%">
      <div v-if="isShowPlan" class="drawerContent">
        <import-plan :detailInfo="detailInfo" :setformData="setformData"></import-plan>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import api from '@/api/yardTally/carAppointment'
import publicapi from '@/api/public/index'
import BaseTable from '@/components/BaseTable'
import importPlan from './subPage/importPlan.vue'
import Upload from '@/components/upload'
export default{
  components: { BaseTable,importPlan,Upload },
  data () {
    return {
      searchform: {
        driver: '',
        preArriveTime: '',
        truckNo: '',
        status: '',
      },
      cargoList: [], // 货名
      customerList: [], // 货主
      loading: false,
      tableData: [], // 主列表
      columns: [
        {
          prop: 'truckNo',
          label: '车号',
        },
        {
          prop: 'dispatchNo',
          label: '派车单号',
        },
        {
          prop: 'shipname',
          label: '船名',
        },
        {
          prop: 'customerName',
          label: '客户名称',
        },
        {
          prop: 'driver',
          label: '司机姓名',
        },
        {
          prop: 'businessType',
          label: '业务类型',
          render: (h,params) => {
            if (params.row.businessType == '1') {
                return h('span', {
                  domProps: {
                    innerHTML: '集港'
                  }
                })
              } else if (params.row.businessType == '2') {
                return h('span', {
                  domProps: {
                    innerHTML: '疏港'
                  }
                })
              }
          }
        },
        {
          prop: 'cargoCategoryName',
          label: '货种',
        },
        {
          prop: 'storehouseName',
          label: '库场',
        },
        {
          prop: 'ton',
          label: '重量'
        },
        {
          prop: 'remark',
          label: '备注'
        },
        {
          prop: 'preArriveTime',
          label: '预计到港时间'
        },
        {
          label: '状态',
          render: (h,params) => {
            if (params.row.status == '1') {
                return h('span', {
                  domProps: {
                    innerHTML: '未入厂'
                  }
                })
              } else if (params.row.status == '2') {
                return h('span', {
                  domProps: {
                    innerHTML: '进厂'
                  }
                })
              } else if (params.row.status == '3') {
                return h('span', {
                  domProps: {
                    innerHTML: '出厂'
                  }
                })
              }
          }
        },
        {
          label: '审核状态',
          render: (h,params) => {
            if (params.row.auditStatus == '1') {
                return h('el-tag', {
                  props: {
                    size: 'mini'
                  },
                  domProps: {
                    innerHTML: '未审核'
                  }
                })
              } else if (params.row.auditStatus == '2') {
                return h('el-tag', {
                  props: {
                    size: 'mini',
                    type: 'success'
                  },
                  domProps: {
                    innerHTML: '已审核'
                  }
                })
              }
          }
        },
      ],
      tableHeight: window.innerHeight - 200,
      detailInfo: null,
      // 页码
			queryall: {
				totalNum: 0,
				startpage: 1,
				pagesize: 15,
			},
      isShow: false,
      formitem: {
        dispatchNo: '',
        truckNo: '',
        driver: '',
        ton: '',
        storehouseId: '',
        cargoCategoryCode: '',
        cargoCategoryName: '',
        planId: '',
        planNo: '',
        mattachmentInfoList: [],
      },
      activeNames: '1',
      detailTableData: [],
      vehicleForm: {
        detailTableData: [],
      },
      rules: {
        'quantity': [
          { required: true, message: '请输入件数', trigger: 'blur' }
        ],
        'ton': [
          { required: true, message: '请输入重量', trigger: 'blur' }
        ],
        'volume': [
          { required: true, message: '请输入体积', trigger: 'blur' }
        ],
      },
      cargoCategoryList: [], // 货种
      storehouseList: [], // 库场
      isShowPlan: false,
      statusList: [
        {
          value: '1',
          label: '未入厂'
        },
        {
          value: '2',
          label: '进厂'
        },
        {
          value: '3',
          label: '出厂'
        },
      ],
      fileList: [],
    }
  },
  activated () {
    this.getCargoList()
    this.getCustomer()
  },
  methods: {
    // 获取货名
    getCargoList () {
      publicapi.listCargoByNameCode({cargo: ''}).then(res => {
        this.cargoList = res.data.data
      })
    },
    // 查询库场信息
    getStorehouse () {
      publicapi.listStorehouse().then(res => {
        this.storehouseList = res.data.data
      })
    },
    // 获取货种
    getlistCargoCategory () {
      publicapi.getlistCargoCategory().then(res => {
        this.cargoCategoryList = res.data.data
      })
    },
    // 获取货主
    getCustomer () {
      publicapi.getlistCustomer().then(res => {
        this.customerList = res.data.data
      })
    },
    // 分页查询
		sizeChange(val) {
			this.queryall.pagesize = val
			this.searchData()
		},
		// 分页查询
		pageChange(val) {
			this.queryall.startpage = val
			this.searchData()
		},
    // 查询主列表
    searchData () {
      this.loading = true
      let params = Object.assign({},this.queryall,this.searchform)
      api.queryAll(params).then(res => {
        this.loading = false
        if (res.data.code != '0000') {
          return this.$message.error(res.data.msg)
        }
        this.tableData = res.data.data.pages
        this.queryall.startpage = res.data.data.pageNum // 当前页
        this.queryall.pagesize = res.data.data.pageSize // 每页多少
        this.queryall.totalNum = res.data.data.totalNum
        this.detailInfo = null
      })
    },
    // 点击行
    handlerClickDetails (val) {
      this.detailInfo = val
    },
    // 打开审核抽屉
    auditVehicle () {
      if (this.detailInfo == null) {
        return this.$message.warning('请先选择一条数据')
      }
      this.formitem.driver = this.detailInfo.driver
      this.formitem.dispatchNo = this.detailInfo.dispatchNo
      this.formitem.truckNo = this.detailInfo.truckNo
      this.formitem.storehouseId = this.detailInfo.storehouseId
      this.formitem.ton = this.detailInfo.ton
      this.formitem.cargoCategoryCode = this.detailInfo.cargoCategoryCode
      this.formitem.planId = this.detailInfo.planId
      this.formitem.planNo = this.detailInfo.planNo ? this.detailInfo.planNo : ''

      this.selectvehicleData()
      this.getlistCargoCategory()
      this.getStorehouse()
      this.isShow = true
    },
    // 添加车辆信息
    addVehicle () {
      let data = {
        trustId: this.detailInfo.trustId,
        truckNo: this.detailInfo.truckNo,
        cargoInfoId: this.detailInfo.cargoInfoId,
        cargoCode: '',
        cargoName: '',
        pieceNo: '',
        material: '',
        specs: '',
        mark: '',
        quantity: '',
        ton: '',
        volume: '',
      }
      this.vehicleForm.detailTableData.push(data)
    },
    // 删除
    handlerClickDetail (index) {
      this.vehicleForm.detailTableData.splice(index,1)
    },
    // 关闭前回调
    handleClose () {
      this.isShow = false
    },
    // 审核/新增
    saveInventory () {
      this.$refs.vehicleForm.validate((valid) => {
        if (!valid) {
          return false
        }
        let params = Object.assign({},this.formitem)
        params.id = this.detailInfo.id
        params.itemList = this.vehicleForm.detailTableData
        api.insert(params).then(res => {
          if (res.data.code != '0000') {
            return this.$message.error(res.data.msg)
          }
          this.$message.success('保存成功')
        })
      })
    },
    // 回显数据
    selectvehicleData () {
      let params = {
        parentId: this.detailInfo.id
      }
      api.selectTYardCollectionTicket(params).then(res => {
        if (res.data.code != '0000') {
          return this.$message.error(res.data.msg)
        }
        this.vehicleForm.detailTableData = res.data.data
      })
    },
    // 查询计划
    selectPlan () {
      this.isShowPlan = true
    },
    setformData (val) {
      this.formitem.planId = val.id
      this.formitem.planNo = val.planNo
      this.isShowPlan = false
    },
    changeCargo (index,row) {
      this.vehicleForm.detailTableData[index].cargoName = this.cargoList.filter(v => v.cargoCode == row.cargoCode)[0].cargoName
    },
    // 文件
    changeFile () {
      this.formitem.mattachmentInfoList = fileList
    },
  }
}
</script>
<style lang="less" scoped>
@import "../../../assets/searchfrom.less";
/deep/ .el-drawer__header {
  margin-bottom: -1px;
  padding: 18px 16px;
  border-bottom: 1px solid gainsboro;
}
/deep/ .el-form-item {
  padding-right: 10px;
}
/deep/.el-drawer__body {
  margin-bottom: 50px;
}
.vehicleForm {
  /deep/ .el-form-item {
    margin-bottom: 0px;
  }
}
</style>